<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="申请开票">
	</u-navbar>
	<view class="padding-30rpx">
		<view class="white-bg" style="border-radius: 8px;font-size: 15px; padding: 15px 15px 0 15px">
			<view class="flex-jc-s-b" style="border-bottom:1px solid rgba(0,0,0,0.1); padding-bottom: 15px" >
				<text>发票类型</text>
				<view class="flex-al-center">
					<u-radio-group v-model="data.form.titleTypeCode">
						<view class="flex-al-center">
							<u-radio :size="32" :label="''" :name="'person'" />
							<text style="font-size: 13px">个人</text>
						</view>
						<view class="flex-al-center" style="margin-left: 20px;">
							<u-radio :size="32" :label="''" :name="'enterprise'" />
							<text style="font-size: 13px">企业</text>
						</view>
					</u-radio-group>
				</view>
			</view>
			<!-- 企业 -->
			<view v-if="data.form.titleTypeCode=='enterprise'" class="flex-jc-s-b mine-cell" v-for="(item,index) in data.list"
				style="padding: 15px 0;">
				<view class="flex-al-center">
					<u-radio-group v-model="data.form.titleId">
						<u-radio shape="circle" :size="32" :label="''" :name="item.id" />
					</u-radio-group>
					<view class="flex-column"
						style="color: #666666;font-size: 12px;align-items: flex-start;margin-left: 5px;">
						<view class="">
							<text
								style="font-size: 15px;font-weight: 500;color:#333333;margin-right: 5px;">{{item.title||''}}</text>
              <text v-if="item.defaultFlag === 1" style="font-size: 10px;color: #409EFF;border: 1px solid;border-radius: 2px;padding: 0 4px;text-align: center">默认</text>
						</view>
						<text style="margin: 7px 0;">{{item.taxIdentificationNumber||''}}</text>
            <text v-if="item.address" style="margin-top: 7px;">{{item.address}}</text>
            <text v-if="item.mobile" style="margin-top: 7px;">{{item.mobile}}</text>
            <text v-if="item.bankName" style="margin-top: 7px;">{{item.bankName}}</text>
            <text v-if="item.bankAccount" style="margin-top: 7px;">{{item.bankAccount}}</text>
					</view>
				</view>
				<u-icon @click="$routePage({url:'pages/invoice/add-update',params:{type:'update',id:item.id}})"
					:color="'#939393'" size="40" name="edit-pen"></u-icon>
			</view>
			<view>
				<!-- 个人 -->
				<view class="" v-if="data.form.titleTypeCode=='person'">
          <view>
            <u-form>
              <u-form-item label="发票抬头" labelWidth="160">
                <u--input placeholder="请输入发票抬头" :maxlength="50" v-model="data.form.title" :inputAlign="'right'"
                          border="none" :placeholderStyle="{textAlign: 'right', color: '#D3D3D3'}"></u--input>
              </u-form-item>
            </u-form>
          </view>
				</view>
				<view v-if="data.form.titleTypeCode=='enterprise'" class="flex-center"
					style="color:#999999;padding: 15px 0 ;font-size: 12px;"
					@click="$routePage({url:'pages/invoice/add-update',params:{type:'add'}})">
					<text>立即添加企业发票</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="height: 80px;"></view>
	<view class="comfig-button flex-center">
		<u-button @click="confirmHandle" :customStyle="{'width':'345px',margin:'0'}" type="primary" shape="circle"
			text="提交申请"></u-button>
	</view>
</template>

<script setup>
	import { onMounted, reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { listApi, invoiceApi } from './const.js'
  import pageRoute from '../../../utils/pageRoute'
	const data = reactive({
		form: {
			"orderId": '', //订单id
			"titleTypeCode": "person", //发票类型："person"-个人 "enterprise"-企业
			"title": "", //抬头， 类型为个人得时候必填
			"titleId": '' //发票抬头id
		},
		list: []
	})
	onLoad((options) => {
    uni.$on('getTitleList',getTitleList)
		data.form.orderId = options.id || '';
    initList()
	})

  function getTitleList (code) {
    data.list = []
    data.form.titleTypeCode = code || 'person'
    if(data.form.titleTypeCode === 'enterprise') {
      initList()
    } else if(data.form.titleTypeCode === 'person') {
    }
  }

	const initList = () => {
		listApi({}).then((res) => {
			data.list = res.rows || []
      data.list.map(item => {
        if(item.defaultFlag === 1) {
          data.form.titleId = item.id
        }
      })
		})
	}
	const confirmHandle = () => {
		if (!data.form.titleId && data.form.titleTypeCode == 'enterprise') {
			uni.showToast({
				title: '请选择开票公司',
				duration: 1200,
				icon: "none"
			});
			return
		}
		if (!data.form.title && data.form.titleTypeCode == 'person') {
			uni.showToast({
				title: '请输入发票抬头',
				duration: 1200,
				icon: "none"
			});
			return
		}
    data.form.titleTypeCode === 'enterprise'? data.form.title = '' : ''
		invoiceApi(data.form).then((res) => {
			uni.showToast({
				title: '申请成功',
				duration: 1200,
				icon: "none"
			});
      setTimeout(() => {
        pageRoute.routeRedirect('pages/order/query')
      }, 500)
		})
	}
  const goBack = () => {
    setTimeout(() => {
      uni.navigateBack({
        delta: 1
      })
    },500)
  }
</script>

<style lang="scss" scoped>
  .mine-cell {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
	.comfig-button {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 30px;
	}
</style>
